<template>
    <div>
        <a href="/AddStore">添加</a>

        名称:
        <input type="text" v-model="ts.name">
        服务类型:
        <select v-model="ts.typeid">
            <option value="0">请选择</option>
            <option value="1">优服务</option>
            <option value="2">没服务</option>
        </select>

        <input type="button" value="查询" @click="cccc">

        <table class="table">
            <thead>
                <tr>
                    <td>id</td>
                    <td>机构名称</td>
                    <td>图片</td>
                    <td>服务类型</td>
                    <td>营业时间</td>
                    <td>机构地址</td>
                    <td>手机</td>
                    <td>发布/未发布</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{ a.id }}</td>
                    <td>{{ a.name }}</td>
                    <td>
                        <img :src="'https://localhost:7249'+ a.img" height="50px" width="50px" alt="">
                    </td>
                    <td>{{ a.storeTypeId }}</td>
                    <td>{{ a.dates.substring(0,10) }}</td>
                    <td>{{ a.address }}</td>
                    <td>{{ a.phone }}</td>
                    <td>{{ a.state?"发布":"未发布" }}</td>
                    <td>
                        <input type="button" value="删除" @click="Del(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        当前第{{ts.index}}页,共{{zys.list}}条,每页{{ts.size}}条,共{{zys.row}}页

        <select @change="xg" v-model="ts.size">
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';

onMounted(()=>{
    showstore();
})

const cccc=()=>{
    ts.value.index=1;
    showstore();
}

const Del=(_id:any)=>{
    if(!confirm("确认删除吗?")){
        return;
    }

    axios.delete("https://localhost:7249/api/Sto/Del",{params:{id:_id}}).then(res=>{
        if(res.data.id>0){
            alert("删除失败")
        }
        else{
            alert("删除成功")
            showstore()
        }
    })
}

const xg=()=>{
    ts.value.index=1;
    showstore()
}

const fy=(val:any)=>{
    if(val==1){
        ts.value.index=1;
        showstore()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1;
            showstore()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1;
            showstore()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row;
        showstore()
    }
}

const ts=ref({
    index:1,
    size:2,
    name:'',
    typeid:0
})

const zys=ref({
    list:0,
    row:0
})

const showstore=()=>{
    axios.get("https://localhost:7249/api/Sto/Show",{params:ts.value}).then(res=>{
        data.value=res.data.row;

        zys.value.list=res.data.list;
        zys.value.row=Math.ceil(res.data.list/ts.value.size);
    })
}

const data=ref([{
      "storeTypeId": 0,
      "storeTypeName": "",
      "id": 0,
      "name": "",
      "img": "",
      "dates": "2025-03-19T03:38:58.423",
      "address": "",
      "phone": "",
      "state": false
}])
</script>

<style scoped>

</style>